<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>留言板</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/bootstrap-fileupload.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        .list-group a {
            background-color: #393d49;
            border: 0px;
            color: white;

        }

        .list-group a:hover {
            background-color: #12967c;
            border: 0px;
            color: white;

        }

        .layui-card{
            box-shadow: 2px 2px 10px lightgray;
            margin-top: 30px;
        }
    </style>
</head>

<body class="layui-layout-body" >
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <a href="">
            <div class="layui-logo">心理咨询预约系统</div>
        </a>
        <!-- 头部区域（可配合layui已有的水平导航） -->

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;"><span id="usernameheader">xs-shuai </span></a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="userInfo.html">个人中心</a>
                    </dd>
                    <dd>
                        <a href="/login/logout">注销登录</a>
                    </dd>

                </dl>
            </li>

        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <div class="list-group">
                <a href="index.html" class="list-group-item">首页</a>
                <a href="adviceManger.html" class="list-group-item">预约咨询</a>
                <a href="adviceStuManger.html" class="list-group-item">咨询邀请</a>
                <a href="courseHistory.html" class="list-group-item">查看公告</a>
                <a href="noticeBoard.html" class="list-group-item active">留言板</a>
                <a href="userInfo.html" class="list-group-item">个人中心</a>
            </div>
        </div>
    </div>
    <div class="layui-body" style="padding: 20px;">

        <!-- 内容主体区域 -->
        <div style="display: flex;justify-content: space-between;">
            <div>
                <div class="h3">留言板</div>
                <div class="h5" style="color: lightgray;">留言均为匿名，请畅所欲言</div>
            </div>
            <button type="button" class="layui-btn layui-btn-normal" id="addMsg">添加留言</button>
        </div>

        <div class="col-md-12" >
            <div class="layui-row" id="card-view">



            </div>
        </div>
        <div class="col-md-12" style="margin-top: 15px">

        </div>
        <div class="col-md-12" style="margin-top: 5px">

        </div>

    </div>
    <div class="layui-footer">
        © 2023 <a href="#">心理咨询预约系统</a>
    </div>
</div>

<!--模态框-->
<div class="modal" id="addmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    添加
                </h4>
            </div>
            <div class="modal-body">
                <!--添加框-->
                <div class="form-horizontal">
                    <input type="hidden" class="form-control" id="nid" value="">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">
                            内容</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" id="message" placeholder="内容"></textarea>
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
                <button id="submit" type="button" class="btn btn-primary">
                    提交
                </button>
            </div>
        </div>
    </div>
</div>

</body>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-fileupload.js"></script>
<script src="../layui/layui.all.js"></script>
<script src="../js/myjs.js"></script>
<script src="../js/md5.js"></script>
<script>
    var path;
    var allpassword;
    $(function () {

        getTeacher();
        if ($("#nid").val().trim().length == 0) {
            $("#showImg").hide();
        }
        shouimg();
        //添加下是初始化
        $("#addbutton").click(function () {
            $("#title").val("");
            $("#content").val("");
        })

        $("#addMsg").click(function (){
            $("#addmodal").modal('show');
        })

        //添加或修改
        $("#submit").click(function () {
            insert();
            getTeacher();
            $("#addmodal").modal('hide');
        })

        $("#search").click(function () {
            getTeacher()
        })

    })

    //添加
    function insert() {
        //必填项验证
        var message = $("#message").val().trim();

        if (message.length == 0 ) {
            layer.msg('请填写完整信息', {
                time: 1000,
                btn: ['好的']
            })
            return;
        }
        var json =
            {
                message: message,
                valid: 1
            }

        $.ajax({
            url: "/message/addMessage",
            type: "post",
            cache: false,
            contentType: "application/json",
            datatype: "json",
            data: JSON.stringify(json),
            success: function (response) {
                if (response.code == 200) {
                    layer.msg("修改成功", {
                        time: 1000,
                        btn: ['好的']
                    })
                }
                getTeacher();
            }
            ,
            error: function (response) {
                console.log("出错返回: " + response);
                console.log("出错数据: " + JSON.stringify(response));
            }
        });

    }

    //获得教练列表 多条件
    function getTeacher() {
        var json = { valid: 1}
        console.log(json);
        $.ajax({
            url: "/message/findMessage",
            type: "post",
            cache: false,
            contentType: "application/json",
            datatype: "json",
            data: JSON.stringify(json),
            success: function (response) {
                if (response.code == 200) {
                    //渲染数据
                    addtr(response.data);
                }
            }
            ,
            error: function (response) {
                console.log("出错返回: " + response);
                console.log("出错数据: " + JSON.stringify(response));
            }
        });

    }

    function addtr(data) {
        $("#card-view").empty();
        for(var i = 0;i<data.length;i++){
            var card = $('<div class="col-md-3"><div class="layui-card"><div class="layui-card-header" style="color:lightgray;">'
                + dateString(data[i].createdate)+' 匿名发布'+  '</div><div class="layui-card-body">'
                +   data[i].message +'</div></div></div>');
            $("#card-view").append(card);
        }



    }



    // 日期控件初始化
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#inDate'
        });
        laydate.render({
            elem: '#birthDate'
        });
    })
</script>
</html>
